<template>
  <div>
  <div >
    <!-- 表格 -->
    <el-table
      :data="Listdata"
      style="width: 70%"
      border
       @select="singal"
      @select-all="all"
      
      >
      
               <el-table-column
      type="selection"
      width="55"
     
      >
     
    </el-table-column>
      
 

      <el-table-column

        label="商品图片"
        width="180">
        <template slot-scope="scope">
             <img :src="imgchang(scope.row.img)" width="100px" height="100px"/>
           </template>
      </el-table-column>
      <el-table-column
        prop="name"
        label="商品名称"
        width="180">
      </el-table-column>
      <el-table-column
        prop="price"
        label="价格">
      </el-table-column>
       <el-table-column
        label="数量">
        <template slot-scope="scope">
           <button @click="add(scope.row.idnum)" >+</button>
        {{scope.row.goodsnum}}
            <button @click="del(scope.row.idnum)" :disabled="scope.row.goodsnum===1?true:false">-</button>
        </template>
         
      </el-table-column>
      <el-table-column label="操作">
          <template slot-scope="scope">
         
            <!-- 删除按钮 -->
            <el-button
              type="danger"
              icon="el-icon-delete"
              size="mini"
              @click="removeCar(scope.row.idnum)"
            ></el-button>
         
          </template>
        </el-table-column>
    </el-table>
  <div class="footer">
    <div class="total">
      <p>总共:<strong class="str"> {{this.total}}</strong>件</p>
    <p class="pricet">￥{{this.totalprice}}</p>
    </div>
    <div class="btn">
      <el-button type="danger">立即结算</el-button>
    </div>
    
  </div>
  
  
  </div>
 
  </div>

</template>
<script>
export default{
  data(){
    return{
        Listdata:[],
        total:"0",
        totalprice:"0"
    }
  },
  created(){
    this.getList();
  },
  methods:{
    getList(){
      this.$axios.get("/app/login/getcar",{
        params:{
          iduser:window.sessionStorage.getItem('token')
        }
      }).then((res)=>{
        // console.log(res);
        this.Listdata=res.data.result;
        this.number=res.data.goodsnum;
      })
    },
    imgchang(x){
      return require("../../server/upload/"+x);
    },
    add(xid){
      this.$axios.post("/app/login/addcaragain",{
        idnum:xid,
        iduser:window.sessionStorage.getItem('token')
      }).then((res)=>{
        console.log(res);
        this.$router.go(0);
      })
    },
    del(xid){
        this.$axios.post("/app/login/delcar",{
        idnum:xid,
        iduser:window.sessionStorage.getItem('token')
      }).then((res)=>{
        console.log(res);
        this.$router.go(0);
      })
    },
    singal(selection, row){
      // console.log(selection);
      var sum=0;
      var price=0;
      selection.forEach(e => {
        sum=sum+e.goodsnum;
        price=price+e.price*e.goodsnum;
      });
      this.total=sum;
      this.totalprice=price;
      // console.log(this.total);
     
    },
    all(selection){
      // console.log('全部')
      // console.log(selection);
       var sum=0;
       var price=0;
      selection.forEach(e => {
        sum=sum+e.goodsnum;
          price=price+e.price*e.goodsnum;
      });
      this.total=sum;
      this.totalprice=price;
      // console.log(this.total);
    },
    removeCar(xid){
      this.$axios.post("/app/login/delallcar",{
        idnum:xid,
        iduser:window.sessionStorage.getItem('token')
      }).then((res)=>{
        // console.log(res);
        if(res.data.state==201){
          this.$message.success("删除成功");
          this.$router.go(0);
        }
      })
    }
   
  }
}
</script>
<style scoped>
.footer{
  margin-top: 30px;
  /* background-color: aqua; */
  height: 100px;
  width: 70%;
  display: flex;
  border: 1px solid #ebeef5;
}
.total{
flex: 2;
/* background-color: blueviolet; */
align-self: center;
text-align: end;
padding-right: 30px;
}
.btn{
  flex: 1;
  align-self: center;
  /* background-color: blue; */
}
.str{
  color: crimson;
}
.pricet{
  color: crimson;
  font-weight: 700;
}
</style>
